<template>
  <div class="info-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>提现详情</span>
      </div>
      <div class="text item">
        <el-row :gutter="10">
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">用户名</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{listData.userName}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">持卡人</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{listData.cardName}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">到账金额</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{listData.remitAmount}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">提现金额</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{listData.amount}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">开户行</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{listData.bankName}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">卡号</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{listData.cardNo}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">开户网点</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{listData.bankBranch}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">申请时间</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{getTime(listData.createTime)}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">手续费</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{listData.fee}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">处理状态</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{status[listData.status]}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">锁定状态</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{lockStatus[listData.lockStatus]}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">审核状态</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{checkStatus[listData.checkStatus]}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">打款状态</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{remitStatus[listData.remitStatus]}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">支付流水号</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{listData.traceNo}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">操作备注</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{listData.remarks}}</div>
          </el-col>
          <el-col :xs="8" :sm="6" :md="4" :lg="3">
            <div class="grid-content bg-purple">打款时间</div>
          </el-col>
          <el-col :xs="4" :sm="6" :md="8" :lg="9">
            <div class="grid-content bg-purple-light">{{getTime(listData.optTime)}}</div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script>
  import { formatTimestamp } from '@/utils/date'
  export default {
    data() {
      return {
        listData: {},
        status: {
          '-1': '提现失败',
          '0': '处理中',
          '1': '提现成功',
          '2': '待处理'
        },
        lockStatus: {
          '0': '未锁定',
          '1': '已锁定'
        },
        checkStatus: {
          '0': '已拒绝',
          '1': '已通过',
          '2': '未审核'
        },
        remitStatus: {
          '0': '未汇款',
          '1': '已汇款'
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.$http
          .post('withdraw/queryDetails', {
            id: this.$route.query.id
          })
          .then((data) => {
            this.listData = data.info
            /* 
              traceNo       支付流水号
              remarks        备注
              createTime    申请时间
              optTime     打款时间
  
              status        处理状态
              lockStatus    锁定状态
              checkStatus   审核状态
              remitStatus   打款状态
  
              黄斌
              处理状态：[-1:提现失败，0:处理中，1:提现成功]
              锁定状态：[0：未锁定，1：已锁定]
              审核状态：[0：已拒绝，1：已通过]
              汇款状态：[0：未汇款，1：已汇款]
            */
          })
      },
      getTime(time) {
        if (!time) {
          return
        }
        return formatTimestamp(time)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .info-container {
    .el-col {
      border-radius: 4px;
    }

    .bg-purple {
      background: #d3dce6;
      text-align: right;
    }

    .bg-purple-light {
      background: #e5e9f2;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      padding: 0 10px;
    }
  }
</style>